<style include="settings-shared">
  h2 {
    padding-inline-start: var(--cr-section-padding);
  }

  .sub-item {
    margin-inline-start: var(--cr-section-indent-width);
  }

  h2 ~ .settings-box,
  h2 ~ settings-toggle-button,
  h2 ~ cr-link-row,
  iron-collapse .settings-box,
  iron-collapse settings-toggle-button,
  iron-collapse cr-link-row {
    margin-inline-end: var(--cr-section-padding);
    margin-inline-start: var(--cr-section-indent-padding);
    padding-inline-end: 0;
    padding-inline-start: 0;
  }

  .settings-box.indented,
  settings-toggle-button.indented {
    margin-inline-start: calc(var(--cr-section-indent-padding) +
                              var(--cr-section-indent-width));
  }

  #screenMagnifierZoomHintLabel {
    white-space: pre-line;
  }

  #dictationLocaleMenuSubtitle {
    max-width: 450px;
    overflow-wrap: break-word;
  }
</style>
<template is="dom-if" if="[[!isKioskModeActive_]]">
  <div class="settings-box row first">
    <localized-link
        localized-string="$i18n{a11yExplanation}"
        link-url="$i18nRaw{a11yLearnMoreUrl}">
    </localized-link>
  </div>
</template>
<h2>$i18n{textToSpeechHeading}</h2>
<settings-toggle-button
    pref="{{prefs.settings.accessibility}}"
    label="$i18n{chromeVoxLabel}"
    deep-link-focus-id$="[[Setting.kChromeVox]]">
</settings-toggle-button>
<iron-collapse opened="[[prefs.settings.accessibility.value]]">
  <div class="sub-item">
    <cr-link-row id="chromeVoxSubpageButton"
      class="settings-box" on-click="onChromeVoxSettingsTap_"
      label="$i18n{chromeVoxOptionsLabel}" external>
    </cr-link-row>
  </div>
  <div class="sub-item">
    <cr-link-row id="chromeVoxTutorialButton"
      class="settings-box" on-click="onChromeVoxTutorialTap_"
      label="$i18n{chromeVoxTutorialLabel}" external>
    </cr-link-row>
  </div>
</iron-collapse>
<settings-toggle-button
    pref="{{prefs.settings.a11y.select_to_speak}}"
    class="hr"
    label="$i18n{selectToSpeakTitle}"
    sub-label="[[getSelectToSpeakDescription_(
        prefs.settings.a11y.select_to_speak.value, hasKeyboard_,
        '$i18nPolymer{selectToSpeakDisabledDescription}',
        '$i18nPolymer{selectToSpeakDescription}',
        '$i18nPolymer{selectToSpeakDescriptionWithoutKeyboard}')]]"
    deep-link-focus-id$="[[Setting.kSelectToSpeak]]">
</settings-toggle-button>
<iron-collapse opened="[[prefs.settings.a11y.select_to_speak.value]]">
  <div class="sub-item">
    <cr-link-row id="selectToSpeakSubpageButton"
        class="settings-box" on-click="onSelectToSpeakSettingsTap_"
        label="$i18n{selectToSpeakOptionsLabel}" external>
      </cr-link-row>
  </div>
</iron-collapse>

<cr-link-row id="ttsSubpageButton" class="hr"
    label="$i18n{manageTtsSettings}" on-click="onManageTtsSettingsTap_"
    sub-label="$i18n{ttsSettingsLinkDescription}"
    role-description="$i18n{subpageArrowRoleDescription}" embedded>
</cr-link-row>

<h2>$i18n{displayHeading}</h2>
<settings-toggle-button
    pref="{{prefs.settings.a11y.high_contrast_enabled}}"
    label="$i18n{highContrastLabel}"
    deep-link-focus-id$="[[Setting.kHighContrastMode]]">
</settings-toggle-button>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.screen_magnifier}}"
    label="$i18n{screenMagnifierLabel}"
    sub-label="[[screenMagnifierHintLabel_]]"
    disabled="[[prefs.ash.docked_magnifier.enabled.value]]"
    deep-link-focus-id$="[[Setting.kFullscreenMagnifier]]">
</settings-toggle-button>
<template is="dom-if" if="[[prefs.settings.a11y.screen_magnifier.value]]">
  <div class="settings-box continuation">
    <settings-radio-group id="screenMagnifierMouseFollowingModeRadioGroup"
        pref="{{prefs.settings.a11y.screen_magnifier_mouse_following_mode}}"
        class="sub-item">
      <template
          is="dom-if"
          if="[[isMagnifierContinuousMouseFollowingModeSettingEnabled_]]">
        <controlled-radio-button
            id="screenMagnifierMouseFollowingModeContinuous"
            name="[[screenMagnifierMouseFollowingModePrefValues_.CONTINUOUS]]"
            pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]"
            label="$i18n{screenMagnifierMouseFollowingModeContinuous}">
        </controlled-radio-button>
      </template>
      <controlled-radio-button
          id="screenMagnifierMouseFollowingModeCentered"
          name="[[screenMagnifierMouseFollowingModePrefValues_.CENTERED]]"
          pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]"
          label="$i18n{screenMagnifierMouseFollowingModeCentered}">
      </controlled-radio-button>
      <controlled-radio-button
          id="screenMagnifierMouseFollowingModeEdge"
          name="[[screenMagnifierMouseFollowingModePrefValues_.EDGE]]"
          pref="[[prefs.settings.a11y.screen_magnifier_mouse_following_mode]]"
          label="$i18n{screenMagnifierMouseFollowingModeEdge}">
      </controlled-radio-button>
    </settings-radio-group>
  </div>
  <settings-toggle-button
      class="indented hr"
      pref="{{prefs.settings.a11y.screen_magnifier_focus_following}}"
      label="$i18n{screenMagnifierFocusFollowingLabel}"
      deep-link-focus-id$=
          "[[Setting.kFullscreenMagnifierFocusFollowing]]">
  </settings-toggle-button>
  <div class="settings-box indented">
    <div class="flex start settings-box-text" id="labelWrapper">
      <div class="label" aria-hidden="true">$i18n{screenMagnifierZoomLabel}</div>
      <div class="secondary label" id="screenMagnifierZoomHintLabel">$i18n{screenMagnifierZoomHintLabel}</div>
    </div>
    <settings-dropdown-menu label="$i18n{screenMagnifierZoomLabel}"
        pref="{{prefs.settings.a11y.screen_magnifier_scale}}"
        menu-options="[[screenMagnifierZoomOptions_]]"
        disabled="[[!prefs.settings.a11y.screen_magnifier.value]]">
    </settings-dropdown-menu>
  </div>
</template>
<settings-toggle-button
    class="hr"
    pref="{{prefs.ash.docked_magnifier.enabled}}"
    label="$i18n{dockedMagnifierLabel}"
    disabled="[[prefs.settings.a11y.screen_magnifier.value]]"
    deep-link-focus-id$="[[Setting.kDockedMagnifier]]">
</settings-toggle-button>
<template is="dom-if" if="[[prefs.ash.docked_magnifier.enabled.value]]">
  <div class="settings-box continuation">
    <div class="start sub-item settings-box-text" aria-hidden="true">
      $i18n{dockedMagnifierZoomLabel}
    </div>
    <settings-dropdown-menu label="$i18n{dockedMagnifierZoomLabel}"
        pref="{{prefs.ash.docked_magnifier.scale}}"
        menu-options="[[screenMagnifierZoomOptions_]]"
        disabled="[[!prefs.ash.docked_magnifier.enabled.value]]">
    </settings-dropdown-menu>
  </div>
</template>
<template is="dom-if" if="[[!isKioskModeActive_]]">
  <cr-link-row id="displaySubpageButton" class="hr"
      label="$i18n{displaySettingsTitle}" on-click="onDisplayTap_"
      sub-label="$i18n{displaySettingsDescription}"
      role-description="$i18n{subpageArrowRoleDescription}" embedded>
  </cr-link-row>
  <cr-link-row id="appearanceSubpageButton" class="hr"
      label="$i18n{appearanceSettingsTitle}" on-click="onAppearanceTap_"
      sub-label="$i18n{appearanceSettingsDescription}" external
      embedded></cr-link-row>
</template>

<h2>$i18n{keyboardAndTextInputHeading}</h2>
<settings-toggle-button
    pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
    label="$i18n{stickyKeysLabel}"
    deep-link-focus-id$="[[Setting.kStickyKeys]]">
</settings-toggle-button>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.virtual_keyboard}}"
    label="$i18n{onScreenKeyboardLabel}"
    deep-link-focus-id$="[[Setting.kOnScreenKeyboard]]">
</settings-toggle-button>
<template is="dom-if" if="[[isDictationCommandsFeatureEnabled_]]">
  <settings-toggle-button
      id="enableDictation"
      class="hr"
      pref="{{prefs.settings.a11y.dictation}}"
      label="$i18n{dictationLabel}"
      sub-label="[[dictationSubtitle_]]"
      deep-link-focus-id$="[[Setting.kDictation]]"
      learn-more-url="[[dictationLearnMoreUrl_]]">
  </settings-toggle-button>
</template>
<template is="dom-if" if="[[!isDictationCommandsFeatureEnabled_]]">
  <settings-toggle-button
        id="enableDictation"
        class="hr"
        pref="{{prefs.settings.a11y.dictation}}"
        label="$i18n{dictationLabel}"
        sub-label="[[dictationSubtitle_]]"
        deep-link-focus-id$="[[Setting.kDictation]]">
  </settings-toggle-button>
</template>
<template is="dom-if" if="[[areDictationLocalePrefsAllowed_]]">
  <template is="dom-if" if="[[prefs.settings.a11y.dictation.value]]">
    <div class="settings-box continuation indented">
      <div class="flex start settings-box-text" id="labelWrapper">
        <div class="label" aria-hidden="true" id="dictationLocaleMenuLabel">
            $i18n{dictationLocaleMenuLabel}
        </div>
        <div class="secondary label" id="dictationLocaleMenuSubtitle">
            [[dictationLocaleMenuSubtitle_]]
        </div>
      </div>
      <cr-button on-click="onChangeDictationLocaleButtonClicked_">
        $i18n{dictationChangeLanguageButton}
      </cr-button>
      <template is="dom-if" if="[[showDictationLocaleMenu_]]" restamp>
        <os-settings-change-dictation-locale-dialog
          id="changeDictationLocaleDialog"
          pref="{{prefs.settings.a11y.dictation_locale}}"
          on-close="onChangeDictationLocalesDialogClosed_"
          options="[[dictationLocaleOptions_]]">
        </os-settings-change-dictation-locale-dialog>
      </template>
    </div>
  </template>
</template>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.focus_highlight}}"
    label="$i18n{focusHighlightLabel}"
    deep-link-focus-id$="[[Setting.kHighlightKeyboardFocus]]">
</settings-toggle-button>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.caret_highlight}}"
    label="$i18n{caretHighlightLabel}"
    deep-link-focus-id$="[[Setting.kHighlightTextCaret]]">
</settings-toggle-button>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.caretbrowsing.enabled}}"
    on-change="onA11yCaretBrowsingChange_"
    label="$i18n{caretBrowsingTitle}"
    sub-label="$i18n{caretBrowsingSubtitle}">
</settings-toggle-button>
<template is="dom-if" if="[[!isKioskModeActive_]]">
  <settings-toggle-button
      id="enableSwitchAccess"
      class="hr"
      pref="{{prefs.settings.a11y.switch_access.enabled}}"
      label="$i18n{switchAccessLabel}"
      deep-link-focus-id$="[[Setting.kEnableSwitchAccess]]">
  </settings-toggle-button>
  <iron-collapse
      opened="[[prefs.settings.a11y.switch_access.enabled.value]]">
    <div class="sub-item">
      <cr-link-row id="switchAccessSubpageButton"
          label="$i18n{switchAccessOptionsLabel}"
          on-click="onSwitchAccessSettingsTap_"
          role-description="$i18n{subpageArrowRoleDescription}" embedded>
      </cr-link-row>
    </div>
  </iron-collapse>
  <cr-link-row id="keyboardSubpageButton" class="hr"
      label="$i18n{keyboardSettingsTitle}" on-click="onKeyboardTap_"
      sub-label="$i18n{keyboardSettingsDescription}"
      role-description="$i18n{subpageArrowRoleDescription}" embedded>
  </cr-link-row>
</template>

<h2>$i18n{mouseAndTouchpadHeading}</h2>
<settings-toggle-button
    pref="{{prefs.settings.a11y.autoclick}}"
    label="$i18n{clickOnStopLabel}"
    deep-link-focus-id$="[[Setting.kAutoClickWhenCursorStops]]">
</settings-toggle-button>
<div class="settings-box continuation"
    hidden$="[[!prefs.settings.a11y.autoclick.value]]">
  <div class="start sub-item settings-box-text" aria-hidden="true">
    $i18n{delayBeforeClickLabel}
  </div>
  <settings-dropdown-menu label="$i18n{delayBeforeClickLabel}"
      pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
      menu-options="[[autoClickDelayOptions_]]"
      disabled="[[!prefs.settings.a11y.autoclick.value]]">
  </settings-dropdown-menu>
</div>
<div class="sub-item">
  <settings-toggle-button class="sub-item"
    hidden$="[[!prefs.settings.a11y.autoclick.value]]"
    pref="{{prefs.settings.a11y.autoclick_stabilize_position}}"
    label="$i18n{autoclickStabilizeCursorPosition}">
  </settings-toggle-button>
</div>
<div class="sub-item">
  <settings-toggle-button class="sub-item"
    hidden$="[[!prefs.settings.a11y.autoclick.value]]"
    pref="{{prefs.settings.a11y.autoclick_revert_to_left_click}}"
    label="$i18n{autoclickRevertToLeftClick}">
  </settings-toggle-button>
</div>
<div class="settings-box continuation"
    hidden$="[[!prefs.settings.a11y.autoclick.value]]">
  <div class="start sub-item settings-box-text" aria-hidden="true">
    $i18n{autoclickMovementThresholdLabel}
  </div>
  <settings-dropdown-menu
      label="$i18n{autoclickMovementThresholdLabel}"
      pref="{{prefs.settings.a11y.autoclick_movement_threshold}}"
      menu-options="[[autoClickMovementThresholdOptions_]]"
      disabled="[[!prefs.settings.a11y.autoclick.value]]">
  </settings-dropdown-menu>
</div>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.large_cursor_enabled}}"
    label="$i18n{largeMouseCursorLabel}"
    deep-link-focus-id$="[[Setting.kLargeCursor]]">
</settings-toggle-button>
<div class="settings-box continuation"
    hidden$="[[!prefs.settings.a11y.large_cursor_enabled.value]]">
  <div class="start sub-item settings-box-text" aria-hidden="true">
    $i18n{largeMouseCursorSizeLabel}
  </div>
  <settings-slider
      pref="{{prefs.settings.a11y.large_cursor_dip_size}}"
      min="25" max="64"
      label-aria="$i18n{largeMouseCursorSizeLabel}"
      label-min="$i18n{largeMouseCursorSizeDefaultLabel}"
      label-max="$i18n{largeMouseCursorSizeLargeLabel}">
  </settings-slider>
</div>
<div class="settings-box">
  <div class="start settings-box-text" id="cursorColorOptionsLabel">
    $i18n{cursorColorOptionsLabel}
  </div>
  <settings-dropdown-menu aria-labeledby="cursorColorOptionsLabel"
      pref="{{prefs.settings.a11y.cursor_color}}"
      menu-options="[[cursorColorOptions_]]"
      on-settings-control-change="onA11yCursorColorChange_"
      deep-link-focus-id$="[[Setting.kEnableCursorColor]]">
  </settings-dropdown-menu>
</div>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.cursor_highlight}}"
    label="$i18n{cursorHighlightLabel}"
    deep-link-focus-id$="[[Setting.kHighlightCursorWhileMoving]]">
</settings-toggle-button>
<cr-link-row id="pointerSubpageButton" class="hr"
    label="$i18n{mouseSettingsTitle}" on-click="onMouseTap_"
    sub-label="$i18n{mouseSettingsDescription}"
    role-description="$i18n{subpageArrowRoleDescription}" embedded>
</cr-link-row>
<template is="dom-if" if="[[showShelfNavigationButtonsSettings_]]" restamp>
  <!-- If shelf navigation buttons are implicitly enabled by other a11y
      settings (e.g. by spoken feedback), the toggle control should be
      disabled, and toggled regardless of the actual backing pref value. To
      handle effective pref value changes, wrap the backing pref in a
      private property, which changes to a stub pref object when the setting
      is implicitly enabled. -->
  <settings-toggle-button
      id="shelfNavigationButtonsEnabledControl"
      class="hr"
      disabled="[[shelfNavigationButtonsImplicitlyEnabled_]]"
      pref="[[shelfNavigationButtonsPref_]]"
      no-set-pref
      on-settings-boolean-control-change=
          "updateShelfNavigationButtonsEnabledPref_"
      label="$i18n{tabletModeShelfNavigationButtonsSettingLabel}"
      sub-label="$i18n{tabletModeShelfNavigationButtonsSettingDescription}"
      learn-more-url="$i18n{tabletModeShelfNavigationButtonsLearnMoreUrl}"
      on-learn-more-clicked="onShelfNavigationButtonsLearnMoreClicked_"
      deep-link-focus-id$="[[Setting.kTabletNavigationButtons]]">
  </settings-toggle-button>
</template>

<h2>$i18n{audioAndCaptionsHeading}</h2>
<template is="dom-if" if="[[!isKioskModeActive_]]">
  <cr-link-row id="captionsSubpageButton" class="first"
      label="$i18n{captionsTitle}"
      on-click="onCaptionsClick_"
      role-description="$i18n{subpageArrowRoleDescription}">
  </cr-link-row>
</template>
<settings-toggle-button
    class="hr"
    pref="{{prefs.settings.a11y.mono_audio}}"
    label="$i18n{monoAudioLabel}"
    deep-link-focus-id$="[[Setting.kMonoAudio]]">
</settings-toggle-button>
<settings-toggle-button id="startupSoundEnabled"
    class="hr"
    pref=" "
    on-change="toggleStartupSoundEnabled_"
    label="$i18n{startupSoundLabel}"
    deep-link-focus-id$="[[Setting.kStartupSound]]">
</settings-toggle-button>

<template is="dom-if"
    if="[[shouldShowAdditionalFeaturesLink_(isGuest_, isKioskModeActive_)]]">
  <a class="settings-box inherit-color no-outline" tabindex="-1"
      id="additionalFeaturesLink" target="_blank"
      href="https://chrome.google.com/webstore/category/collection/3p_accessibility_extensions">
    <div class="start settings-box-text">
      $i18n{additionalFeaturesTitle}
      <div class="secondary" id="moreFeaturesSecondary">
        $i18n{a11yWebStore}
      </div>
    </div>
    <cr-icon-button class="icon-external"
        aria-label="$i18n{additionalFeaturesTitle}"
        aria-describedby="moreFeaturesSecondary"></cr-icon-button>
  </a>
</template>
